<template>
  <div class="w-full">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    modelValue: {
      type: String,
      required: true,
    },
  },
  emits: ['update:modelValue'],
  provide() {
    return {
      activeTab: this.modelValue,
      updateActiveTab: (value) => this.$emit('update:modelValue', value),
    };
  },
  watch: {
    modelValue(newVal) {
      this.activeTab = newVal;
    },
  },
};
</script>
